<section class="content-section-column" style="padding: 0 24px 24px 24px; background-color: #f0f2f4">
  <h3>Card</h3>
  <lv-tabs lvType="card" class="demo-tabs-card">
    <lv-tab lvTitle="Tab 001"><ng-container [ngTemplateOutlet]="contentTpl"></ng-container></lv-tab>
    <lv-tab lvTitle="Tab 002"></lv-tab>
    <lv-tab lvTitle="Tab 003" lvDisabled></lv-tab>
  </lv-tabs>

  <h3>Default</h3>
  <lv-tabs class="demo-tabs-default">
    <lv-tab lvTitle="Tab 001"><ng-container [ngTemplateOutlet]="contentTpl"></ng-container></lv-tab>
    <lv-tab lvTitle="Tab 002"></lv-tab>
    <lv-tab lvTitle="Tab 003"></lv-tab>
  </lv-tabs>

  <h3>Underline</h3>
  <lv-tabs lvType="underline" class="demo-tabs-default">
    <lv-tab lvTitle="Tab 001"><ng-container [ngTemplateOutlet]="contentTpl"></ng-container></lv-tab>
    <lv-tab lvTitle="Tab 002"></lv-tab>
    <lv-tab lvTitle="Tab 003"></lv-tab>
  </lv-tabs>

  <h3>Panel</h3>
  <lv-tabs lvType="panel" class="demo-tabs-default">
    <lv-tab lvTitle="Tab 001"><ng-container [ngTemplateOutlet]="contentTpl"></ng-container></lv-tab>
    <lv-tab lvTitle="Tab 002"></lv-tab>
    <lv-tab lvTitle="Tab 003"></lv-tab>
  </lv-tabs>
</section>

<ng-template #contentTpl>
  <div class="demo-tabs-card-item"></div>
</ng-template>
